<script setup>
  import { ref } from 'vue'
  import slVehicleViolation from './components/vehicle-violation'
  import slVehicleBreakdown from './components/vehicle-breakdown'
  import slVehicleAccident from './components/vehicle-accident'
  import { onLoad } from '@dcloudio/uni-app'
  import {postTruckRegistrationApi} from '@/apis/task'
  // 引入task仓库
  import {useTaskStore} from '@/stores/task'
  // 使用小仓库
  const taskStore = useTaskStore()  
  // 出车时间
  const startTime = ref('')
  // 任务id
  const id = ref('')
  // 回车时间
  const endTime = ref('')

  // 获取地址上的参数
  onLoad((params) => {
    startTime.value = params.actualDepartureTime
    id.value = params.transportTaskId
    taskStore.recordData.id = id.value
    taskStore.recordData.startTime = startTime.value
  })

  // 点击选择日历
  const onChangeDateTimePicker = () => {
    taskStore.recordData.endTime = endTime.value
    console.log(taskStore.recordData.endTime);
  }

  // 提交回车登记
  const onSubmit = async () => {
    const body = taskStore.recordData
    console.log(body);
   const res = await postTruckRegistrationApi(body)
   console.log(res);
   if (res.code === 200) {
    uni.utils.toast({type:'success',message:'成功提交'})
    uni.reLaunch({ url: '/pages/task/index' })
   } else {
    uni.utils.toast({type:'error',message:'提交失败'})
   }
  }
</script>
<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view class="scroll-view-wrapper">
        <uni-list class="base-info">
          <uni-list-item
            title="出车时间"
            show-arrow
            :right-text="startTime"
          />
          <uni-list-item show-arrow title="回车时间">
            <template v-slot:footer>
              <uni-datetime-picker @change="onChangeDateTimePicker" v-model="endTime">
                <view class="picker-value">{{
                  endTime || '请选择'
                }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>
        </uni-list>
        <sl-vehicle-violation></sl-vehicle-violation>
        <sl-vehicle-breakdown></sl-vehicle-breakdown>
        <sl-vehicle-accident></sl-vehicle-accident>
      </view>
    </scroll-view>
    <view class="toolbar">
      <button @click="onSubmit" class="button">提交登记</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
